<template>
  <section class="overview-container">
    <div class="overview-col1"><strong class="overview-overallScore">4.6</strong>
      <div>综合评价</div>
      <p class="overview-small">高于周边商家{{percent}}%</p>
    </div>
    <div class="overview-col2">
      <div class="overview-line"><span>服务态度</span> <span class="overview-lineContent"><div class="rating-wrapper"><Star-Rating :score = "scores.service_score"></Star-Rating></div> <span class="overview-lineScore_FKvKk_0">{{scores.service_score|formatScore}}</span></span>
      </div>
      <div class="overview-line"><span>菜品评价</span> <span class="overview-lineContent"><div class="rating-wrapper"><Star-Rating :score = "scores.food_score"></Star-Rating></div> <span class="overview-lineScore_FKvKk_0">{{scores.food_score|formatScore}}</span></span>
      </div>
      <div class="overview-line"><span>送达时间</span> <span class="overview-lineContent overview-small">{{scores.deliver_time}}分钟</span></div>
    </div>
  </section>
</template>
<script>
  import ShopAPI from '../../exchange/shopAPI.js'
  import StarRating from '../common/StarRating'
  export default {
    name: 'ShopRateScore',
    data () {
      return {
        scores: {}
      }
    },
    props: {
      shopID: {
        type: String
      }
    },
    computed: {
      percent: function () {
        return parseFloat(this.scores.compare_rating * 100).toFixed(1)
      }
    },
    filters: {
      formatScore: function (value) {
        return parseFloat(value).toFixed(1)
      }
    },
    created () {
      ShopAPI.getShopRateScores(this.shopID).then(res => {
        this.scores = res.data
      })
    },
    components: {
      StarRating
    }
  }
</script>
<style></style>
